<template>
  <div class="g-bd">
    <!-- 登录时显示的页面 -->
    <el-container v-show="isLogin">
      <el-aside width="240px">
        <h4> <a href="#">我的歌手(5)</a> </h4>
        <h4> <a href="#">我的电台(5)</a> </h4>
        <div class="mycreate">
          <h2>
            <a href="#"><i class="iconfont">+</i>创建</a>
            <span><i class="iconfont icon-lower-triangle"></i>创建的歌单(2)</span>
          </h2>
          <ul>
            <li>
              <div class="left"></div>
              <div class="right"></div>
            </li>
          </ul>
        </div>
      </el-aside>
      <el-main>
        <!-- 歌单介绍 -->
        <div class="m-info">
          <div class="left">
            <img v-lazy="pldetail.coverImgUrl">
            <span></span>
          </div>
          <div class="right">
            <div class="hd flex">
              <i class="iconfont icon-biaoqian"></i>
              <h2 class="tit">{{pldetail.name}}</h2>
            </div>
            <div class="user flex">
              <a
                href="#"
                class="face"
              >
                <img
                  v-lazy="pldetail.creator.avatarUrl"
                  class="facepic"
                  @click="goUserHome(pldetail.creator.userId)"
                >
              </a>
              <span
                class="name"
                @click="goUserHome(pldetail.creator.userId)"
              >
                <a href="javascript:;">{{pldetail.creator.nickname}}</a>
              </span>
              <img
                src="../../assets/image/renzheng.png"
                class="renz"
              >
              <span class="time">{{pldetail.createTime | dateFormat}}&nbsp;创建</span>
            </div>
            <div class="btns">
              <a
                href="#"
                class="bo"
              ><i class="iconfont icon-bofang"></i>播放</a>
              <a
                href="#"
                class="jia"
              ><i class="iconfont icon-hao"></i></a>
              <a href="#"><i class="iconfont icon-tianjiawenjianjia"></i>({{pldetail.subscribedCount}})</a>
              <a href="#"><i class="iconfont icon-fenxiang"></i>{{pldetail.shareCount}}</a>
              <a href="#"><i class="iconfont icon-xiazai1"></i>下载</a>
              <a href="#"><i class="iconfont icon-pinglun"></i>{{pldetail.commentCount}}</a>
            </div>
            <div class="tags">
              <b>标签：</b>
              <a
                href="#"
                class="u-tag"
                v-for="(item,index) in pldetail.tags"
                :key="index"
              ><i>{{item}}</i></a>
            </div>
            <p class="intr">介绍：{{pldetail.description}}</p>
          </div>
        </div>
        <!-- END------------------------------ -->
        <!-- 歌单内容 -->
        <div class="n-songtb">
          <div class="utit">
            <span class="songlist">歌曲列表</span>
            <span class="songnum">{{pldetail.trackCount}}首歌</span>
            <div class="bf">播放<span>{{pldetail.playCount}}</span>次</div>
            <a href="#">
              <i class="iconfont icon-yinfu"></i>
              <span>生成外链播放器</span>
            </a>
          </div>
          <div class="songlis">
            <table class="mtable">
              <thead>
                <tr>
                  <th class="first"></th>
                  <th class="biao">歌曲标题</th>
                  <th class="time">时长</th>
                  <th class="artister">歌手</th>
                  <th class="zhuanji">专辑</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item,index) in pldetail.tracks"
                  :key="index"
                >
                  <td class="one">
                    <div class="hd">
                      <span class="num">{{index+1}}</span>
                      <i
                        class="iconfont icon-bofang"
                        @click="playMusic(item.id)"
                      ></i>
                    </div>
                  </td>
                  <td class="music flex">
                    <a
                      href="#"
                      class="f-thide"
                      @click.prevent="goMusic(item.id)"
                    >{{item.name}}</a>
                  </td>
                  <td class="timelong">
                    <span>{{item.dt | dateFormat2}}</span>
                    <div class="td iconfa">
                      <div class="boxaaa icons">
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-hao"></i></a>
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-tianjiawenjianjia"></i></a>
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-fenxiang"></i></a>
                        <a
                          href="#"
                          class="icn"
                        ><i class="iconfont icon-xiazai1"></i></a>
                      </div>

                    </div>
                  </td>
                  <!-- 歌手 -->
                  <td
                    class="artister f-thide"
                    @click.prevent="goArtist(item.ar[0].id)"
                  >{{item.ar[0].name}}</td>
                  <!-- 专辑 -->
                  <td
                    class="zhuan f-thide"
                    @click.prevent="goAlbum(item.al.id)"
                  >{{item.al.name}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="m-playlist-see-more">
          <div class="text">查看更多内容，请下载客户端</div>
          <a
            href="#"
            class="nowdow"
          >立即下载</a>
        </div>
        <!-- END------------------------------ -->
        <!-- 评论区 -->
        <commo :pid="plid"></commo>
        <!-- END------------------------------ -->
      </el-main>
    </el-container>
    <!-- 未登录时显示的框 -->
    <div
      class="n-pglg"
      v-show="!isLogin"
    >
      <a
        href="#"
        class="btn"
      ></a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../eventbus.js'
export default {
  data () {
    return {
      // 是否登录
      isLogin: false,
      uid: 5151127394,
      userplaylist: [],
      jienum: 2,
    }
  },
  created () {
    // bus.$on('uid', val => {
    //   this.uid = val
    //   console.log('用户id：', val)
    // })
    this.hasLogin()
    this.getsongList()
  },
  methods: {
    // 判断登录状态
    async hasLogin () {
      let res = await axios.get('https://autumnfish.cn//login/status')
      // console.log(res)
      if (res.data.data.code === 200) {
        this.isLogin = true
      }
      else this.isLogin = false
    },
    // 获取我的歌单
    async getsongList () {
      let res = await axios.get('https://autumnfish.cn//user/playlist?uid=' + this.uid)
      console.log(res)
      this.userplaylist = res.data.playlist
      for (let j = 0; j < this.userplaylist.length; j++) {
        if (this.userplaylist[j].creator.userId == this.userId) {
          this.jienum = j + 1;
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  .el-aside {
    height: 257px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 50px;
    padding-top: 40px;
    h4 {
      height: 36px;
      line-height: 36px;
      a {
        padding: 0 5px 2px 35px;
        font-size: 14px;
        color: #000;
      }
    }
    .mycreate {
      margin-top: 8px;
      h2 {
        padding: 0 10px 12px 35px;
        font-size: 14px;
        color: #000;
        a {
          float: right;
          width: 52px;
          height: 22px;
          color: #666;
          // border: 1px solid #666;
          text-align: center;
          border-radius: 4px;
          font-size: 12px;
          .iconfont {
            color: red;
          }
        }
        span {
          .iconfont {
            font-size: 12px;
            color: #666;
          }
        }
      }
      ul {
        li {
          .left {
          }
          .right {
          }
        }
      }
    }
  }
}
.n-pglg {
  width: 807px;
  height: 268px;
  margin: 0 auto 0;
  padding-top: 104px;
  background: url(../../assets/image/mymusic.png) no-repeat;
  background-position: 0 104px;
  .btn {
    display: block;
    width: 167px;
    height: 45px;
    margin: 102px 0 0 482px;
    background: url(../../assets/image/mymusic.png) no-repeat;
    background-position: 0 9999px;
    margin-top: 200px;
    cursor: pointer;
  }
}
</style>
